<template>
  <div class="app-container">
    <el-row>
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="公司名称">
          <el-input v-model="queryParams.name"  clearable />
        </el-form-item>
        <el-form-item label="热线电话">
          <el-input v-model="queryParams.phone"  clearable />
        </el-form-item>
        <el-form-item label="维修点城市" >
            <el-cascader
                v-model="selectedRegion"
                placeholder="请选择省/市"
                maxlength="30"
                clearable
                :options="proCityList"
                :props="props"
                @change="handleChange"
            />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
              v-model="queryParams.type"
              placeholder="状态"
              clearable
          >
            <el-option label="封停" value="0" />
            <el-option label="正常" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" :icon="Search" @click="query">查询</el-button>
          <el-button type="primary" :icon="RefreshRight" @click="resetQueryForm">重置</el-button>
        </el-form-item>
      </el-form>

    </el-row>
    <el-row>
      <el-col>

        <el-button  type="success" :icon="Plus" plain @click="addPage">新增维修点</el-button>
        <el-button type="danger" :icon="Delete" plain @click="deleteSelectedRows" :disabled="!isSelectRow">删除</el-button>
        <el-button type="warning" :icon="Download" plain @click="resetPassword" >导入</el-button>

      </el-col>
    </el-row>
    <el-row >
      <el-table
          :data="userList"
          border
          stripe
          style="height: 545px"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
            prop="id"
            label="ID"
            width="80"
        />
        <el-table-column
            prop="repName"
            label="公司名称"
            width="280"
        />
        <el-table-column
            prop="repAddress"
            label="详细地址"
            width="380"
        />
        <el-table-column
            prop="repNumber"
            label="热线电话"
        />
        <el-table-column
            label="状态"
        >
          <template #default="scope">
            <!--status必须是String类型,否则switch组件不识别-->
            <el-switch
                :model-value="String(scope.row.status)"
                inline-prompt
                active-value="1"
                active-text="正常"
                inactive-value="0"
                inactive-text="停用"
                class="ml-2"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                @change="switchHandler(scope.row)"
            />
          </template>

        </el-table-column>

        <el-table-column label="操作" default="scope">
          <template #default="scope">
            <el-button type="primary" size="small" @click="view(scope.row)">查看</el-button>
            <el-button type="primary" size="small" @click="edit(scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="deleteOne(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-col :span="24">

        <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[5, 10, 20, 50]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryParams.total"
            @size-change="query"
            @current-change="query"
        />
      </el-col>
    </el-row>
  </div>

  <!-- 订单申诉退换货表单弹窗 -->
  <el-dialog
      v-model="editFormVisible"
      :title="editTitle"
      width="1000px"
  append-to-body
  :before-close="handleClose"
  >
  <!-- 固定表单容器，设置最大高度和右侧滚动 -->
  <div class="form-container">
    <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="120px"
        size="default"
    >
      <!-- 所有面板默认展开（activeNames绑定所有面板name） -->
      <el-collapse v-model="activeNames" border :accordion="false">
        <!-- 申诉基本信息 -->
        <el-collapse-item name="1" title="申诉基本信息">
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="申诉记录名称" prop="appealName">
                <el-input
                    v-model="editForm.appealName"
                    placeholder="请输入申诉记录名称"
                    maxlength="50"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申诉来源" prop="appealSource">
                <el-select
                    v-model="editForm.appealSource"
                    placeholder="请选择申诉来源"
                    class="full-width"
                >
                  <el-option label="电话投诉" value="phone" />
                  <el-option label="在线客服" value="online" />
                  <el-option label="邮件反馈" value="email" />
                  <el-option label="其他渠道" value="other" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="申诉记录描述" prop="appealDesc">
                <el-input
                    v-model="editForm.appealDesc"
                    placeholder="请详细描述申诉内容"
                    type="textarea"
                    rows="3"
                    maxlength="500"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>

        <!-- 订单基本资料 -->
        <el-collapse-item name="2" title="订单基本资料">
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="订单编号" prop="orderNo">
                <el-input
                    v-model="editForm.orderNo"
                    placeholder="请输入订单编号"
                    maxlength="30"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下单日期" prop="orderDate">
                <el-date-picker
                    v-model="editForm.orderDate"
                    type="datetime"
                    placeholder="选择下单日期"
                    value-format="YYYY年MM月DD日 HH:mm:ss"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单类型" prop="orderType">
                <el-select
                    v-model="editForm.orderType"
                    placeholder="请选择订单类型"
                    class="full-width"
                >
                  <el-option label="电话订单" value="phone" />
                  <el-option label="线上订单" value="online" />
                  <el-option label="门店订单" value="store" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单动作" prop="orderAction">
                <el-select
                    v-model="editForm.orderAction"
                    placeholder="请选择订单动作"
                    class="full-width"
                >
                  <el-option label="订购" value="order" />
                  <el-option label="退货" value="return" />
                  <el-option label="换货" value="exchange" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务类型" prop="businessType">
                <el-select
                    v-model="editForm.businessType"
                    placeholder="请选择业务类型"
                    class="full-width"
                >
                  <el-option label="普通业务" value="normal" />
                  <el-option label="VIP业务" value="vip" />
                  <el-option label="企业业务" value="enterprise" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单状态" prop="orderStatus">
                <el-select
                    v-model="editForm.orderStatus"
                    placeholder="请选择订单状态"
                    class="full-width"
                >
                  <el-option label="已下单" value="ordered" />
                  <el-option label="已付款" value="paid" />
                  <el-option label="已发货" value="shipped" />
                  <el-option label="已完成" value="completed" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>

        <!-- 收货人资料 -->
        <el-collapse-item name="3" title="收货人资料">
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="收货人姓名" prop="receiverName">
                <el-input
                    v-model="editForm.receiverName"
                    placeholder="请输入收货人姓名"
                    maxlength="20"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会员账号" prop="memberAccount">
                <el-input
                    v-model="editForm.memberAccount"
                    placeholder="请输入会员账号"
                    maxlength="30"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="receiverTel">
                <el-input
                    v-model="editForm.receiverTel"
                    placeholder="请输入联系电话"
                    maxlength="20"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系手机" prop="receiverPhone">
                <el-input
                    v-model="editForm.receiverPhone"
                    placeholder="请输入联系手机"
                    maxlength="11"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮政编码" prop="zipCode">
                <el-input
                    v-model="editForm.zipCode"
                    placeholder="请输入邮政编码"
                    maxlength="6"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="配送地区" prop="deliveryArea">
                <el-cascader
                    v-model="editForm.deliveryArea"
                    :options="areaOptions"
                    placeholder="请选择配送地区"
                    separator="-"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="收货地址" prop="receiverAddress">
                <el-input
                    v-model="editForm.receiverAddress"
                    placeholder="请输入详细收货地址"
                    maxlength="100"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="配送方式" prop="deliveryMethod">
                <el-select
                    v-model="editForm.deliveryMethod"
                    placeholder="请选择配送方式"
                    class="full-width"
                >
                  <el-option label="EMS" value="ems" />
                  <el-option label="顺丰快递" value="sf" />
                  <el-option label="圆通快递" value="yt" />
                  <el-option label="中通快递" value="zt" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="配送费用" prop="deliveryFee">
                <el-input
                    v-model="editForm.deliveryFee"
                    placeholder="请输入配送费用"
                    maxlength="10"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支付方式" prop="paymentMethod">
                <el-select
                    v-model="editForm.paymentMethod"
                    placeholder="请选择支付方式"
                    class="full-width"
                >
                  <el-option label="货到付款" value="cod" />
                  <el-option label="在线支付" value="online" />
                  <el-option label="银行转账" value="bank" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电子邮箱" prop="email">
                <el-input
                    v-model="editForm.email"
                    placeholder="请输入电子邮箱"
                    maxlength="50"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>

        <!-- 订单商品信息 -->
        <el-collapse-item name="4" title="订单商品信息">
          <el-table
              :data="editForm.productList"
              border
              style="width: 100%; margin-bottom: 15px"
          >
            <el-table-column prop="productCode" label="商品串码" width="120" />
            <el-table-column prop="productName" label="商品名称" width="180" />
            <el-table-column prop="brand" label="商品品牌" width="100" />
            <el-table-column prop="model" label="商品型号" width="120" />
            <el-table-column prop="color" label="商品颜色" width="100" />
            <el-table-column prop="price" label="单价" width="100" />
            <el-table-column prop="quantity" label="数量" width="80" />
            <el-table-column prop="totalAmount" label="总金额" width="100" />
            <el-table-column label="操作" width="80">
              <template #default="scope">
                <el-button
                    type="text"
                    size="small"
                    @click="handleDeleteProduct(scope.$index)"
                    :disabled="editForm.productList.length <= 1"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button
              type="primary"
              size="small"
              @click="handleAddProduct"
              icon="Plus"
          >
            添加商品
          </el-button>
        </el-collapse-item>

        <!-- 订单退换商品信息 -->
        <el-collapse-item name="5" title="订单退换商品信息">
          <el-row :gutter="30">
            <el-col :span="24">
              <el-form-item label="退换货类型" prop="returnType">
                <el-radio-group v-model="editForm.returnType">
                  <el-radio label="refund">仅退款</el-radio>
                  <el-radio label="exchangeSame">同款换货</el-radio>
                  <el-radio label="exchangeDiff">不同机型换货</el-radio>
                  <el-radio label="return">退货退款</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <!-- 原商品信息 -->
            <el-col :span="24" class="mb-4">
              <h4 class="sub-title">原商品信息</h4>
              <el-table
                  :data="editForm.originalProductList"
                  border
                  style="width: 100%; margin-bottom: 15px"
              >
                <el-table-column prop="productCode" label="商品串码" width="120" />
                <el-table-column prop="productName" label="商品名称" width="150" />
                <el-table-column prop="brand" label="商品品牌" width="100" />
                <el-table-column prop="model" label="商品型号" width="120" />
                <el-table-column prop="color" label="商品颜色" width="100" />
                <el-table-column prop="price" label="商品价格" width="100" />
                <el-table-column prop="exchangeName" label="换货名称" width="100" />
                <el-table-column prop="returnReason" label="退换货原因" width="150" />
              </el-table>
            </el-col>

            <!-- 新商品信息 -->
            <el-col :span="24" class="mb-4">
              <h4 class="sub-title">新商品信息</h4>
              <el-table
                  :data="editForm.newProductList"
                  border
                  style="width: 100%; margin-bottom: 15px"
              >
                <el-table-column prop="productCode" label="商品串码" width="120" />
                <el-table-column prop="productName" label="商品名称" width="150" />
                <el-table-column prop="brand" label="商品品牌" width="100" />
                <el-table-column prop="model" label="商品型号" width="120" />
                <el-table-column prop="color" label="商品颜色" width="100" />
                <el-table-column prop="price" label="商品价格" width="100" />
              </el-table>
            </el-col>

            <el-col :span="12">
              <el-form-item label="换货原因" prop="exchangeReason">
                <el-input
                    v-model="editForm.exchangeReason"
                    placeholder="请填写换货原因"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检修单号" prop="repairNo">
                <el-input
                    v-model="editForm.repairNo"
                    placeholder="请输入检修单号"
                    maxlength="30"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户申请时间" prop="applyTime">
                <el-date-picker
                    v-model="editForm.applyTime"
                    type="datetime"
                    placeholder="选择申请时间"
                    value-format="YYYY年MM月DD日 HH:mm:ss"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检修点名称" prop="repairPoint">
                <el-input
                    v-model="editForm.repairPoint"
                    placeholder="请输入检修点名称"
                    maxlength="50"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检修点电话" prop="repairPhone">
                <el-input
                    v-model="editForm.repairPhone"
                    placeholder="请输入检修点电话"
                    maxlength="20"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>




        <!-- 审核 -->
        <el-collapse-item name="7" title="退换货申请单审核">
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="审核人" prop="verifier">
                <el-input
                    v-model="editForm.verifier"
                    placeholder="请输入审核人姓名"
                    maxlength="20"
                    class="full-width"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="审核日期" prop="verifyDate">
                <el-date-picker
                    v-model="editForm.verifyDate"
                    type="datetime"
                    placeholder="选择审核日期"
                    value-format="YYYY年MM月DD日 HH:mm:ss"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="审核意见" prop="verifyOpinion">
                <el-input
                    v-model="editForm.verifyOpinion"
                    placeholder="请填写审核意见"
                    type="textarea"
                    rows="3"
                    maxlength="500"
                    class="full-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否通过" prop="returnType">
                <el-radio-group v-model="editForm.returnType">
                  <el-radio label="1">通过</el-radio>
                  <el-radio label="0">不通过</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>

  <template #footer>
    <div class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </template>
  </el-dialog>
</template>

<script setup>
import {
  Clock,
  Delete,
  Edit,
  Search,
  RefreshRight,
  Plus,
  Download,
} from '@element-plus/icons-vue'
import {ref,onMounted,computed} from "vue";
import api from '@/utils/request.js';
import {formatDay, formatLoginTime} from '@/utils/date.js'
import {ElMessage, ElMessageBox} from "element-plus";
import loginUser from "@/stores/LoginUser.js";
let searchTime = ref(["",""])
let queryParams =ref({})
let userList = ref([])
let isSelectRow = ref(false)
let isAdd= ref(false);
const tableRef = ref(null);
const selectedRows = ref([]);
let proCityList = ref([])
let selectedRegion = ref([])
let selectedReg = ref([])
let resetQueryForm=()=>{
  queryParams.value = {
    pageNum:1,
    pageSize:10,
    name:'',
    phone:'',
    status:'',
    total:'',
  }
  // 重置级联选择器
  selectedRegion.value = []
}

const props = {
  value: 'repLabel', // 指定选项中作为“值”的字段（如后端返回的地区ID）
  label: 'repVal', // 指定选项中作为“显示文本”的字段（如地区名称）
  children: 'childRep', // 指定选项中作为“子选项列表”的字段（如后端返回的子地区列表字段）
  expandTrigger: 'hover',//鼠标悬浮时显示子数据
};

let query = ()=>{
  // if (searchTime.value[0]!==''){
  //   queryParams.value.beginTime = formatDay(searchTime.value[0])
  //   queryParams.value.endTime = formatDay(searchTime.value[1])
  // }
  api.get('/repair/query',queryParams.value).then(res=>{
    console.log( res)
    userList.value = res.data.list
    queryParams.value.total = res.data.total
  })

}

// 添加级联选择器变化的处理方法
const handleChange = (value) => {
  if (value && value.length) {
    queryParams.value.pro = value[0]; // 省份值
    queryParams.value.city = value[1] || ''; // 城市值，可能不存在
  } else {
    queryParams.value.pro = '';
    queryParams.value.city = '';
  }
};

// // 添加级联选择器变化的处理方法
// const onChange = (value) => {
//   if (value && value.length) {
//     editForm.value.repPro = value[0]; // 省份值
//     editForm.value.repCity = value[1] || ''; // 城市值，可能不存在
//   } else {
//     editForm.value.repPro = '';
//     editForm.value.repCity = '';
//   }
// };

let switchHandler = (row)=>{
  ElMessageBox.confirm('是否修改用户['+row.id+']的状态？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    if (row.status == 1){
      row.status = '0'
    }else {
      row.status = '1'
    }
    console.log(row)
    api.post('/repair/save/update',row).then(res=>{
      ElMessage.success('修改成功')
      //query()
    })
  }).catch(() => {
    ElMessage.info('已取消修改');
  })

}
let editFormVisible = ref(false)
let editForm = ref({})
let editTitle = ref('编辑')
let addPage = ()=>{
  editFormVisible.value = true
  isAdd.value = true
  editTitle.value = "新增用户"
  reset()
}
let editFormRules = {
  repName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  repNumber: [
    { required: true, message: '请输入正确的手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, trigger: 'blur' }
  ],
  repAddress: [
    { required: true, message: '请输入详细地址', trigger: 'blur' }
  ],

}
let edit = (row)=>{
  console.log(row)

  editFormVisible.value = true
  isAdd.value = false
  editTitle.value = "退换货审核单"
  // editForm = ref(row)
  //因为editForm这个响应式遍历的值改变了，save方法中发请求用到了editForm的数据，故会调用自动save方法
  // 正确地更新响应式数据
  Object.assign(editForm.value, row)

  // 设置级联选择器的初始值
  if (row.repPro && row.repCity) {
    selectedReg.value = [row.repPro, row.repCity]
  } else {
    selectedReg.value = []
  }
}
/** 取消按钮 */
function cancel() {
  editFormVisible.value = false;
  reset();
}
function reset(){
  editForm.value ={
    id: '',
    repName: '',
    repAddress: '',
    repNumber: '',
    repPro: '',
    repCity: ''
  }
  // 重置级联选择器
  selectedReg.value = []
}
function save() {
  // 手动验证级联选择器
  if (!selectedReg.value || selectedReg.value.length === 0) {
    ElMessage.error('请选择所在城市')
    return
  }

  // 同步数据到 editForm
  editForm.value.repPro = selectedReg.value[0] || ''
  editForm.value.repCity = selectedReg.value[1] || ''

  api.post('/repair/save/update',editForm.value).then(res=>{
    if (res.code == 200){
      ElMessage.success("添加/修改成功")
      cancel()
      query()
    }else {
      ElMessage.error(res.msg)
    }

  })
}

const handleSelectionChange = (val) => {
  selectedRows.value = val;
  isSelectRow.value = selectedRows.value.length > 0;
};
const deleteSelectedRows = () => {
  const idsArray = selectedRows.value.map(row => row.id);
  ElMessageBox.confirm('是否确认删除用户编号为['+idsArray+']的数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    //ids变成,分割的字符串
    const ids = selectedRows.value.map(row => row.id).join(',');
    api.delete('/repair/delete/'+ids).then(res=>{
      ElMessage.success(res.message)
      query()
    })
  }).catch(() => {
    ElMessage.info('已取消删除');
  })
};
let deleteOne = (row)=>{
  ElMessageBox.confirm('是否确认删除用户编号为['+row.id+']的数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
     api.delete('/repair/delete/'+row.id).then(res=>{
      ElMessage.success(res.message)
      query()
    })
  }).catch(() => {
    ElMessage.info('已取消删除');
  })
 }

 function queryRroCityList(){
    api.get('/repair/pro/city').then(res=>{
      proCityList.value = res.data
    })
 }


onMounted(()=>{
  resetQueryForm();
  queryRroCityList();
  query();
})


// 折叠面板默认展开所有项
const activeNames = ref(['1', '2', '3', '4', '5', '6', '7']);

</script>



<style scoped>
/* 核心样式：固定表单容器，右侧滚动（只保留这个滚动条） */
.form-container {
  max-height: calc(80vh - 100px); /* 减去弹窗标题和底部按钮的高度，避免溢出 */
  padding-top: 10px;
  overflow-y: auto;  /* 仅表单内容区滚动 */
  padding-right: 10px;
}

/* 滚动条美化 */
.form-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.form-container::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #c1c1c1;
}

.form-container::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

/* 子标题样式 */
.sub-title {
  font-weight: 600;
  margin-bottom: 8px;
  color: #1f2329;
  font-size: 14px;
}

/* 让输入框占满列宽 */
.full-width {
  width: 100% !important;
}

/* 调整表单项间距 */
::v-deep .el-form-item {
  margin-bottom: 18px;
}

/* 调整折叠面板样式 */
::v-deep .el-collapse-item__content {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

::v-deep .el-collapse-item__header {
  padding: 12px 15px;
  font-weight: 500;
}

/* 关键：限制弹窗内容区高度，禁用弹窗自身滚动 */
::v-deep .taller-dialog .el-dialog__body {
  max-height: 80vh; /* 弹窗整体最大高度（含标题和底部） */
  overflow: hidden !important; /* 禁用弹窗自身滚动 */
  padding: 0 20px !important; /* 去掉默认内边距，避免内容挤压 */
}

/* 调整弹窗垂直位置 */
::v-deep .taller-dialog {
  top: 20px !important;
  transform: translateX(-50%) !important;
}

/* 按钮区域样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px 15px;
  border-top: 1px solid #f2f3f5;
}
</style>